<template>
	<view class="map-container">
		<view class="cur-location">
			<text class="cur-location-title">当前位置:</text>
			<text class="cur-location-name">{{currentLocation}}</text>
		</view>
		<view class="map-view">
			<map class="map-area" :latitude="latitude" :longitude="longitude" :scale="scale" show-location="true"
				:markers="markerArr"></map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentLocation:"厦门高崎国际机场T2航站楼",
				scale: 14,
				latitude: 24.539473,
				longitude: 118.137053,
				markerArr: [{
					id: 1,
					latitude: 24.539473,
					longitude: 118.137053,
					iconPath: "./images/location-marker.png",
				}]
			}
		},
		methods: {
			getCurLocation() {
				// var that = this; // ???
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					// type: 'wgs84', 
					success: function(res) {
						// console.log("获取了定位",res);
						const latitude = res.latitude;
						const longitude = res.longitude;
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						console.log("获取的数据", latitude, longitude)
						console.log("this.latitude", this.latitude)
						console.log("this.longitude", this.longitude)
						// uni.openLocation({
						// 	latitude: latitude,
						// 	longitude: longitude,
						// 	success: function() {
						// 		console.log('success');
						// 	}
						// });
					},
					fail() {
						uni.showToast({
							// title:"定位失败，请检查网络或重新尝试",
							title: "定位失败",
							icon: "none",
							duration: 2000
						})
					}
				});
			}
		},
		async onLoad() {
			console.log("onLoad")
			await this.getCurLocation();
		}
	}
</script>

<style>
	.map-container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.cur-location {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 15vh;
		width: 750rpx;
		z-index: 99999;
		background-color: #fcfcfc;
		padding: 0 10px 5px;

		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: flex-start;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}


	.cur-location text {
		font-size: 16px;
	}

	.cur-location-name {
		font-size: 20px;
		font-weight: bold;
	}

	.map-view .map-area {
		width: 750rpx;
		height: 90vh;
	}
</style>